<template>
	<div class="header">
		<CindexHeader :showheader="false"></CindexHeader>

			<Scroll class="wrapper"> 
			<div class="list">
				<ul class="list-dian">
					<li v-for="(item,index) in recommended" class="options" @click="Recommended($event,index)">
						<h3>{{item}}</h3>
					</li>
				</ul>
			</div>
			</Scroll>

		
		<Scroll class="warp" v-if="bol">
			<div class="advertising">
				<img src="../assets/F-img/分类首页图.png" class="xinde"/>
				<ul class="postalDistrict">
					<li v-for="item in directMail" class="countrieslogo">
						<img :src="item.img"/>
						<h3>{{item.name}}</h3>r
					</li>
				</ul>
				<hr />
				<h3 class="category">热卖品类</h3>
				<ul class="category-list">
					<li v-for="item in Hotcategory" class="species">
						<img :src="item.img" alt="" />
						<h3>{{item.name}}</h3>
					</li>
				</ul>
			</div>
		</Scroll>
		
		<Scroll class="nursing" v-if="!bol">
			<div class="more">
				<img src="../assets/F-img/头图.png"/>
				<ul class="more-list">
					<li v-for="item in Facialtreatment" class="Allcare">
						<img :src="item.img" alt="" />
						<h3>{{item.name}}</h3>
					</li>
				</ul>
			</div>
		</Scroll>
	</div>
</template>
<script>
	import CindexHeader from "../../base/CindexHeader"
	import Scroll from "../../base/Scroll"
	export default {
	  name: 'Classify',
	  data(){
	  	return{
	  		bol:true,
	  		bol2:true,
	  		recommended:[],
	  		directMail:[],
	  		Hotcategory:[],
	  		Facialtreatment:[]
	  	}
	  },
	  methods:{
	  		Recommended:function(e,index){
	  			$(".options>h3").css({"color":"#3c3c3c","borderRight":"0px solid #c1c1c1"});
	  			console.log(index);
	  			if(index == 0){
	  				this.bol=true;
	  				$(e.target).css({"color":"#d72532","borderRight":"1px solid #d72532"});
	  			}else{
	  				this.bol=false;
	  				$(e.target).css({"color":"#d72532","borderRight":"1px solid #d72532"});
	  			}
//	  			if(index == 1){
//	  				this.bol2=true;
//	  			}else{
//	  				this.bol2=false;
//	  			}
//	  			console.log(this.bol);
	  		}
	  },
	  created:function(){
	  	this.axios.post("/api/class").then(function(data){
	  		console.log(data);
	  		this.recommended = data.data.classArr.list;
	  		this.directMail = data.data.classArr.postal;
	  		this.Hotcategory = data.data.classArr.product;
	  		this.Facialtreatment = data.data.classArr.Facial;
	  	}.bind(this));
	  },
	  components:{
	  	CindexHeader,
	  	Scroll
	  }
	}
</script>
<style scoped="scoped">
	.nursing{
		display: inline-block;
		width: 74.6vw;
		overflow: hidden;
		height: 80vh;
	}
	.header{
		font-size: 0;
	}
	.warp{
		display: inline-block;
		width: 74.6vw;
		overflow: hidden;
		height: 80vh;
	}
	.wrapper{
		overflow: hidden;
		height: 80vh;
		width: 25vw;
		display: inline-block;
		border-right: 1px solid #c1c1c1;
	}
	.list{
		width: 25vw;
		height: 100vh;
		text-align: center;
	}
	.options{
		width: 25vw;
		height: 5vh;
		border-bottom: 1px solid #c1c1c1;
		font-size: 0;
		padding-top: 1.5vh;
	}
	.options h3{
		width: 24.8vw;
		font-size: 1.3rem;
		font-weight: 200;
		line-height: 3.8vh;
		
	}
	.xinde{
		width: 69vw;
		padding-top: 0.9rem;
		padding-left: 2.5vw;
		
	}
	.countrieslogo{
		display: inline-block;
		width: 33%;
		vertical-align: top;
		margin-bottom: 0.5rem;
	}
	.countrieslogo img{
		width: 45%;
		margin-top: 0.7rem;
		margin-left: 2rem;
	}
	.countrieslogo h3{
		width: 100%;
		font-size: 1.2rem;
		color: #3c3c3c;
		margin-top: 1rem;
		font-weight: 300;
		text-align: center;
	}
	.advertising{
		width: 74vw;
	}
	.advertising hr{
		text-align: center;
		width: 70vw;
		border: none;
		border-bottom: 1px solid #c1c1c1;
		margin-left: 2vw;
	}
	.category{
		font-size: 1.3rem;
		color: #3c3c3c;
		margin-top: 0.5rem;
		font-weight: 300;
		margin-left: 0.5rem;
	}
	.species{
		width: 30%;
		display: inline-block;
		margin-left: 0.6rem;
		text-align: center;
	}
	.category-list{
		margin-top: 1rem;
		width: 100%;
	}
	.species img{
		width: 100%;
		height: 5.8rem;
	}
	.species h3{
		font-size: 1.1rem;
		color: #3c3c3c;
		margin-top: 0.3rem;
		font-weight: 300;
	}
	
	.more{
		display: inline-block;
	}
	.more img{
		width: 69vw;
		padding-top: 0.9rem;
		margin-left: 0.7rem;
	}
	.postalDistrict{
		width: 100%;
		margin-left: 0.5rem;
	}
	.Allcare{
		width: 30%;
		display: inline-block;
		margin-left: 0.5rem;
		text-align: center;
	}
	.Allcare img{
		width: 100%;
		height: 5.8rem;
		margin-left: 0.3rem;
	}
	.Allcare h3{
		font-size: 1.1rem;
		color: #3c3c3c;
		margin-top: 0.3rem;
		font-weight: 300;
	}
	.more-list{
		width: 100%;
	}
</style>